<template>
    <div class="taskMonitor">
        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="75%"
            :close-on-click-modal="false"
            :before-close="closeDialog"
        >
            <el-main>
                <el-form
                    :model="form"
                    inline
                    style="float:right;margin-right:20px"
                >
                    <el-form-item
                        label="状态"
                        prop="taskResultStatus"
                    >
                        <el-select
                            v-model="form.taskResultStatus"
                            style="width:256px"
                        >
                            <el-option
                                v-for="(item,key) in taskResultStatusInfo "
                                :key="key"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-date-picker
                            v-model="form.TaskTime"
                            clearable
                            is-range
                            type="datetimerange"
                            range-separator="至"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            @change="selectTime"
                        ></el-date-picker>
                    </el-form-item>
                    <el-button
                        type="primary"
                        @click="getTaskMetricsDetailInfor"
                    >
                        查询
                    </el-button>
                </el-form>
                <div style="height:600px">
                    <el-table
                        v-if="tableVisible"
                        v-loading="loading"
                        :data="accessTaskMetricsDetailInfo"
                        max-height="500px"
                    >
                        <el-table-column
                            label="序号"
                            width="50"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                {{ indexMethod(scope.$index) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            v-if="type!=='流式数据'"
                            label="开始时间"
                            prop="beginTime"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            v-if="type!=='流式数据'"
                            label="结束时间"
                            prop="endTime"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            v-if="type==='流式数据'"
                            label="时间段"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                <span>{{ timeTransfer(scope.row) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="状态"
                            prop="taskResultStatus"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                <span>{{ statusTransfer(scope.row.taskResultStatus) }}</span>
                                <el-tooltip
                                    class="item"
                                    effect="light"
                                    :content="'失败原因是'+scope.row.exceptionInfo"
                                    placement="top"
                                >
                                    <i
                                        v-if="scope.row.taskResultStatus==='0'"
                                        style="margin-left:7px; font-size:21px; color: red;"
                                        class="iconfont icon-jinggao"
                                    ></i>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column
                            v-if="type==='文件'"
                            prop="readFileCount"
                            label="来源文件数量"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            v-if="type==='文件'"
                            prop="writeFileCount"
                            show-overflow-tooltip
                            label="接入文件数量"
                        ></el-table-column>
                        <el-table-column
                            label="原始库数据增量"
                            prop="writeRecordsCount"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            label="废止库数据增量"
                            prop="writeRecordsCountDiscard"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            label="原始库存储增量"
                            prop="writeRecordsBytes"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.writeRecordsBytes<1024 && scope.row.writeRecordsBytes!==null">{{ parseFloat(scope.row.writeRecordsBytes).toFixed(2) }}B</span>
                                <span v-else-if="1024<scope.row.writeRecordsBytes && scope.row.writeRecordsBytes<1024*1024 && scope.row.writeRecordsBytes!==null">
                                    {{ parseFloat(scope.row.writeRecordsBytes/1024).toFixed(2) }}Kb</span>
                                <span v-else-if="scope.row.writeRecordsBytes > 1024*1024 && scope.row.writeRecordsBytes!==null">
                                    {{ parseFloat(scope.row.writeRecordsBytes/(1024*1024)).toFixed(2) }}Mb</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="废止库存储增量"
                            prop="writeRecordsBytesDiscard"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.writeRecordsBytesDiscard<1024 && scope.row.writeRecordsBytesDiscard!==null">{{ parseFloat(scope.row.writeRecordsBytesDiscard).toFixed(2) }}B</span>
                                <span v-else-if="1024<scope.row.writeRecordsBytesDiscard && scope.row.writeRecordsBytesDiscard<1024*1024 && scope.row.writeRecordsBytesDiscard!==null">
                                    {{ parseFloat(scope.row.writeRecordsBytesDiscard/1024).toFixed(2) }}Kb</span>
                                <span v-else-if="scope.row.writeRecordsBytesDiscard > 1024*1024 && scope.row.writeRecordsBytesDiscard!==null">
                                    {{ parseFloat(scope.row.writeRecordsBytesDiscard/(1024*1024)).toFixed(2) }}Mb</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            v-if="type==='流式数据'"
                            show-overflow-tooltip
                            label="时效"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.writeRecordsCount==='0' || scope.row.writeRecordsCount===null">{{ 0 }}秒/条</span>
                                <span v-if="scope.row.writeRecordsCount!=='0' && scope.row.writeRecordsCount!==null">{{ parseFloat((scope.row.accessTime==0?1:scope.row.accessTime)/scope.row.writeRecordsCount).toFixed(2) }}秒/条</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="接入耗时"
                            prop="accessTime"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.accessTime!==null">{{ scope.row.accessTime }}s</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            v-if="type!=='文件'"
                            label="流量"
                            prop="flow"
                            min-width="100"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            v-if="type==='流式数据'"
                            prop="overstockProportion"
                            label="积压率"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.overstockProportion === '0%'">0</span>
                                <span v-else>{{ scope.row.overstockProportion }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div
                    class="enc-pagination"
                    style="float:right;"
                >
                    <el-pagination
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        layout=" prev, pager, next, jumper,sizes,total"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </el-main>
        </el-dialog>
    </div>
</template>
<script>
import { searchTaskMetricsDetailInfor } from '@/api/taskMonitorDetail';

export default {
    data() {
        return {
            loading: false,
            tableVisible: true,
            taskResultStatusInfo: [
                {
                    value: '',
                    label: '全部',
                },
                {
                    value: '1',
                    label: '成功',
                },
                {
                    value: '0',
                    label: '失败',
                },
                {
                    value: '2',
                    label: '运行',
                },
            ],
            accessTaskMetricsDetailInfo: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            form: {
                TaskTime: [],
                taskResultStatus: '',
            },
            taskId: '',
            title: '查看详情',
            dialogVisible: false,
            type: '',
            startTime: '',
            endTime: '',
        };
    },
    created() {
    },
    methods: {
        selectTime(val) {
            if (val && val != null) {
                this.startTime = val[0];
                this.endTime = val[1];
            } else {
                this.startTime = null;
                this.endTime = null;
            }
        },
        openDialog(val) {
            this.taskId = val.taskId;
            this.type = val.dataType;
            this.dialogVisible = true;
            this.tableVisible = false;
            this.$nextTick(() => {
                this.tableVisible = true;
            })
            this.init();
        },
        closeDialog() {
            this.startTime = '';
            this.endTime = '';
            this.form.TaskTime = [];
            this.form.taskResultStatus = '';
            this.currentPage = 1;
            this.pageSize = 10;
            this.dialogVisible = false;
            this.$emit('init');
        },
        init() {
            this.getTaskMetricsDetailInfor();
        },
        getTaskMetricsDetailInfor() {
            this.loading = true;
            const param = {
                beginTime: this.startTime,
                endTime: this.endTime,
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                taskId: this.taskId,
                taskResultStatus: this.form.taskResultStatus,
            };
            // 调用后台接口
            searchTaskMetricsDetailInfor(param).then((res) => {
                if (res.data.resultCode === 0) {
                    this.accessTaskMetricsDetailInfo = res.data.data.data;
                    this.total = res.data.data.recordTotal;
                    this.loading = false;
                } else {
                    this.$message.error(res.data.resultMessage);
                    this.loading = false;
                }
            });
        },
        statusTransfer(status) {
            if (status === '1') {
                return '成功';
            }
            if (status === '0') { return '失败'; }
            if (status === '2') { return '运行'; }
            return '';
        },
        // 分页
        handleCurrentChange(pageinfo) {
            this.currentPage = pageinfo;
            this.getTaskMetricsDetailInfor();
        },
        // 一页的大小
        handleSizeChange(pageinfo) {
            this.pageSize = pageinfo;
            this.getTaskMetricsDetailInfor();
        },
        indexMethod(index) {
            return (this.currentPage - 1) * this.pageSize + index + 1;
        },
        timeTransfer(row) {
            if (row.beginTime !== null) {
                const start = row.beginTime.substring(0, 10);
                return start;
            }
            return '';
        },
    },
};
</script>

<style lang="scss">
.taskMonitor {
  .el-dialog__header{
    line-height: 0;
    padding: 20px 30px 10px;
    // @include bg-color();
    // transition: background-color .3s;
    .el-dialog__title{
        // @include font-color();
        color: #0090FF;
        font-size: 20px;
    }
    .el-dialog__headerbtn{
        font-size: .3rem;
    }
}
}
</style>
